<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>长轮训聊天室</title>
    <style>
        .message {
            width: 300px;
            height: 500px;
            border: 2px solid red;
        }
    </style>
</head>
<body>
<div class="message"></div>
<div>
    <input type="text" id="txt" placeholder="输入你要发送的内容">
    <input type="button" value="发送" onclick="sendmessage();">
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    USER_UID = "{{ uid }}";  //用户的uid身份标识
    console.log(USER_UID, 44444444)

    function sendmessage() {
        var text = $("#txt").val();  //获取用户输入的值
        $.ajax({
            url: "/send/msg/",
            type: "GET",
            data: {
                text: text
            },
            success: function (res) {
                console.log(res, "ok!")
            }
        })
    }

    // 获取发送的消息
    function getmessage() {
        $.ajax({
            url: "/get/msg/",
            type: "GET",
            data: {
                uid: USER_UID
            },
            dataType: "JSON",
            success: function (dataArray) {
                console.log(dataArray, 111);
                if (dataArray.status) {
                    var tag = $("<div>");
                    tag.text(dataArray.data); // <div>你好</div>
                    $(".message").append(tag)  // 将生成好的div标签，添加到.message的后面
                }
                getmessage() // 前端递归，不是和后端的一样
            }
        })
    }

    // 页面加载时自动调用函数
    $(function () {
        getmessage();
    })
</script>
</body>
</html>